

function canvasClick() {
  drawCaptcha();
}
// 绘制验证码
function drawCaptcha() {
  let captchaElement = document.getElementById("captcha");
  let ctx = captchaElement.getContext('2d');
  // 绘制浅色背景
  ctx.fillStyle = randomColor(200, 220);
  let captchaW = captchaElement.width;
  let captchaH = captchaElement.height;
  ctx.fillRect(0, 0, captchaW, captchaH);

  // 绘制图片
  // ctx.drawImage(image, 0, 0 ,captchaW, captchaH);

  // 绘制验证字符
  drawChars(ctx, 4, captchaW, captchaH);
  // 绘制干扰线
  drawDisturbLines(ctx, 5, captchaW, captchaH);
  // 绘制干扰点
  drawDisturbDots(ctx, 20, captchaW, captchaH);
}


// 绘制干扰点
function drawDisturbDots(ctx, count, captchaW, captchaH) {
  for (let index = 0; index < count; index++) {
    let x = randomNum(0, captchaW);
    let y = randomNum(0, captchaH);
    let r = randomNum(2, 4);
    ctx.fillStyle = randomColor(30, 200);
    ctx.lineWidth = randomNum(1, 3);
    ctx.beginPath();
    ctx.arc(x, y, r, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
    ctx.closePath();
    ctx.fill();
  }
}

// 绘制干扰线
function drawDisturbLines(ctx, count, captchaW, captchaH) {
  for (let index = 0; index < count; index++) {
    let fX = randomNum(0, captchaW);
    let fY = randomNum(0, captchaH);
    let tX = randomNum(0, captchaW);
    let tY = randomNum(0, captchaH);
    ctx.strokeStyle = randomColor(30, 200);
    ctx.lineWidth = randomNum(1, 3);
    ctx.beginPath();
    ctx.moveTo(fX, fY);
    ctx.lineTo(tX, tY)
    ctx.closePath();
    ctx.stroke();
  }
}

// 绘制字符
function drawChars(ctx, count, captchaW, captchaH) {
  for (let index = 0; index < count; index++) {
    // 字体大小随机为0.3到0.7倍画布高度
    ctx.font = randomNum(0.3 * captchaH, 0.7 * captchaH) + "px serif";
    /*
      alphabetic 	默认。文本基线是普通的字母基线。
      top 	文本基线是 em 方框的顶端。。
      hanging 	文本基线是悬挂基线。
      middle 	文本基线是 em 方框的正中。
      ideographic 	文本基线是表意基线。
      bottom 	文本基线是 em 方框的底端。
    */
    // 注意: 文字的y坐标是根据基准线的不同而不同，y坐标为基准线坐标
    ctx.textBaseline = "middle";
    // 随机字符（数组，大小写字母）
    let message = randomChar();
    // 当前字符宽度
    let msgWidth = ctx.measureText(message).width;
    let radio = 1.0 / count;
    let x = captchaW * radio * (0.5 + index) - 0.5 * msgWidth;
    let y = captchaH * 0.5;
    // 修改坐标原点位置为要水印文字的位置
    ctx.translate(x, y);
    // 随机旋转-30°到+30°
    var deg = this.randomNum(-30, 30)
    ctx.rotate(deg * Math.PI / 180)
    ctx.fillStyle = randomColor(10, 180);
    // 水印文字
    ctx.fillText(message, 0, 0);
    // 恢复坐标原点和旋转角度
    ctx.rotate(-deg * Math.PI / 180)
    ctx.translate(-x, -y);
  }
}

// 随机生成字符（大小写字母或数字）
function randomChar() {
  let type = randomNum(1, 3);
  switch (type) {
    case 1:
      return randomCapitalLetter();
    case 2:
      return randomNum(0, 9);
    case 3:
      return randomLetter();
  }
}

/** 生成一个随机数 **/
// Math.random()  // 0~1的随机数 （包含0不包含1，0的概率极低）
// Math.random() * (max-min)  // 0-到(max-min) 的随机数
// + min // 既 min 到 max 之间的随机数
// 向下取整 Math.floor()
function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// 大写字母
function randomCapitalLetter() {
  let asciiCode = randomNum(65, 90);
  // 十进制ASCII码转换成字符
  // String.fromCharCode(122)
  return String.fromCharCode(asciiCode);
}

// 小写字母
function randomLetter() {
  let asciiCode = randomNum(97, 122);
  return String.fromCharCode(asciiCode);
}

/**生成一个随机色**/
function randomColor(min, max) {
  var r = randomNum(min, max);
  var g = randomNum(min, max);
  var b = randomNum(min, max);
  return "rgb(" + r + "," + g + "," + b + ")";
}

drawCaptcha();